<template>
  <div class="" :class="{ 'flex flex-ai-c flex-jc-sb gap-10': flex }">
    <div class="left flex flex-jc-sb gap-10 clear">
      <div class="fl flex-wrap gap-10 flex-ai-end">
        <div v-for="(i, index) in searchData" class="fl flex-ai-c w-300" :key="index">
          <div class="flex flex-ai-c mg-r-24 mg-b-10">
            <span v-if="!i.hideLabel" class="flex-no-shrink mg-r-10">{{ i.name }}</span>
            <template v-if="i.type === 'input'">
              <el-input class="set-w" v-model="i.value" :placeholder="i.placeholder" clearable
                @input="handleInputChange(i)" />
            </template>
            <template v-if="i.type === 'select'">
              <el-select v-model="i.value" class="w-full" :filterable="i.filterable" clearable :multiple="i.multiple"
                :placeholder="i.placeholder" @change="handleChange(i)" @focus="i.handleFocus && i.handleFocus(i)">
                <el-option v-for="item in i.options" :key="item[i.defaultAttrs.value]" :label="item[i.defaultAttrs.label]"
                  :value="item[i.defaultAttrs.value]" />
              </el-select>
            </template>
            <template v-if="i.type === 'inputSelect'">
              <el-select v-model="i.value" filterable remote class="w-full" clearable :multiple="i.multiple"
                :placeholder="i.placeholder" @change="handleChange(i)" @focus="i.handleFocus && i.handleFocus(i)"
                :remote-method="(val: string) => i.remoteMethod(val, i)">
                <el-option v-for="item in i.options" :key="item[i.defaultAttrs.value]" :label="item[i.defaultAttrs.label]"
                  :value="item[i.defaultAttrs.value]" />
              </el-select>
            </template>
            <template v-if="i.type === 'dateRange'">
              <el-date-picker v-model="i.value" type="daterange" range-separator="至"
                :start-placeholder="i.startPlaceholder" :end-placeholder="i.endPlaceholder" value-format="YYYY-MM-DD"
                @change="handleChange(i)" @calendar-change="i.handleCalendarChange && i.handleCalendarChange($event)" :clearable="!i.unClearable" :disabled-date="i.disableDate || false " />
            </template>
            <template v-if="i.type === 'date'">
              <el-date-picker v-model="i.value" class="w-full" :type="i.dateType || 'date'" :placeholder="i.placeholder"
                @change="handleChange(i)" :clearable="!i.unClearable" :value-format="i.valueFormat || 'YYYY-MM-DD'" />
            </template>
          </div>
        </div>
        <div class="fl flex flex-ai-end">
            <el-button v-if="!autoSearch" class="btn" type="primary" @click="handleSearch">搜索</el-button>
            <el-button class="btn" plain @click="handleReset">重置</el-button>
          </div>
      </div>
    </div>
    <div v-if="buttonList.length" class="right" :class="{ 'mg-t-20 border-top pd-t-20': !flex }">
      <div class="flex flex-jc-sb">
        <div class="flex">
          <slot name="buttonLeft"></slot>
        </div>
        <div class="flex flex-jc-end">
          <template v-for="(i, index) in buttonList" :key="index">
            <export-button v-if="i.buttonType === 'export'" :disabled="i.disabled" @export="i.fn && i.fn()">{{ i.name
            }}</export-button>
            <el-button :plain="i.plain" v-else :type="i.type || 'primary'" :disabled="i.disabled" :key="index"
              @click="i.fn && i.fn()">{{
                i.name
              }}
            </el-button>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { cloneDeep } from 'lodash'
import { Check } from '@element-plus/icons'
export default defineComponent({
  components: {
  },
  props: {
    searchList: {
      type: Object,
      default() {
        return {}
      }
    },
    buttonList: {
      type: Array,
      default() {
        return []
      }
    },
    flex: {
      type: Boolean,
      default: false
    },
    autoSearch: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      searchData: [],
      timer: null as any
    }
  },
  watch: {
    searchList: {
      handler(newval) {
        this.searchData = cloneDeep(newval)
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    handleSearch() {
      this.$emit('update:searchList', this.searchData)
      this.$emit('doSearch')
    },
    handleReset() {
      for (const key in this.searchData) {
        (this.searchData[key] as any).value = (this.searchData[key] as any).defaultValue
      }
      this.$emit('update:searchList', this.searchData)
      this.$emit('doSearch')
    },
    handleChange(item: any) {
        item.handleChange && item.handleChange(item)
            this.handleSearch()
    },
    handleInputChange(item: any) {
      console.log(212121, item)
      if (item.value) {
        item.value = item.value.replace(/\t/, '').trim()
      }
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        item.handleInputChange && item.handleInputChange(item)
        this.handleSearch()
      }, 300)
    }
    // handleDisabledDate(date: any, i: any) {
    //   console.log(111, i.disabledDate);
    //   if (i.disabledDate) {
    //     return i.disabledDate(date, i)
    //   }
    //   return true
    // }
  }
})
</script>

<style scoped lang="stylus">
.w-300
  width 330px

.btn
  display block
  width 80px
  height 36px
.border-top
  border-top 1px solid #eee
.fl
  float left
.fr
  float right
.clear::after
  content ''
  display block
  clear both
  overflow hidden
.mg-r-24
  margin-right 36px
</style>
